<template>
  <!--  审核信息-->
  <Table :header-style="{backgroundColor:'#fffbed'}" max-height="400px" :table-data="tableData" border
         @handleCurrentChange="handleCurrentChange"
         @handleSizeChange="handleSizeChange"
         :table-column="tableColumn" :page="false">
    <template slot="reason" slot-scope="{row}">
      <div v-if="row.cause1 && row.cause2">
        {{ row.cause1 }} - {{ row.cause2 }}
      </div>
      <div v-if="row.cause1 && !row.cause2">
        {{ row.cause1 }}
      </div>
    </template>
    <template slot="remark" slot-scope="{row}">
      <div style="width: 100%;max-height: 300px;overflow: auto;padding: 10px">
        {{ row.details }}
      </div>
    </template>
    <template slot="img" slot-scope="{row}">
      <el-image v-if="row.srcList && row.srcList.length" style="height: 150px;width: 100%" :src="row.srcList[0]"
                :preview-src-list="row.srcList"></el-image>
    </template>
  </Table>
</template>

<script>
import eventBus from "@/utils/eventBus";
import {trustInfoSearch} from "@/api/order";

export default {
  props: ['routesQuery'],
  data() {
    return {
      tableData: [],
      tableColumn: [
        {label: this.$t('操作人'), align: 'center', prop: 'auditName', minWidth: 120},
        {label: this.$t('操作时间'), align: 'center', prop: 'creationTime', minWidth: 200},
        {label: this.$t('原因'), align: 'center', slot: 'reason', minWidth: 200},
        {label: this.$t('备注'), align: 'center', prop: 'details', slot: 'remark', minWidth: 400},
        {label: this.$t('图片'), align: 'center', slot: 'img', minWidth: 200},
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.getList()
    // 监听审核成功事件
    eventBus.$on('examineSuccess', this.getList)
  },
  methods: {
    async getList() {
      const {orderId} = this.routesQuery
      const res = await trustInfoSearch({
        loanRecordId: orderId,
        ...this.page
      })
      if (res.code === 1) {
        const {list, pageNum, total, pageSize} = res.data
        this.tableData = list.map(item => {
          if (item.imgUrl) {
            // 分割字符串 过滤空
            item.srcList = item.imgUrl.split(',').filter(i => i)
          }
          return item
        })
        this.page = {
          pageNum: pageNum,
          pageSize: pageSize,
          total: total,
        }
      }
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getList()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getList()
    }
  },
  beforeDestroy() {
    eventBus.$off('examineSuccess',this.getList)
  }
}
</script>

<style scoped>

</style>
